import React from 'react';
import { Layout, Menu } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import { useHistory, useLocation, Switch, Route, Redirect } from 'react-router-dom';
import Staffz from './Staffz';
import Role from './Role';

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

function Staff(props) {

  var history = useHistory();
  var location = useLocation();
  return (
    <div className="staff">

      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            defaultSelectedKeys={['location.pathname']}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%', borderRight: 0 }}
            onClick={({ item, key, keyPath, domEvent }) => { history.push(key) }}
          >
            <div className="title">员工</div>
            <Menu.Item key="/staff/staffz">员工管理</Menu.Item>
            <Menu.Item key="/staff/role">角色权限管理</Menu.Item>
          </Menu>
        </Sider>
        <Switch>
          <Route path="/staff/staffz" exact component={Staffz}></Route>
          <Route path="/staff/role" exact component={Role}></Route>
          <Redirect from='/staff' exact to="/staff/staffz"></Redirect>
        </Switch>
      </Layout>
    </div>
  );
}

export default Staff;